<template>
<div class="wrap">
  <div class="safe_box f32 white">
    <div class="safe_title">
      <span>输入安全密码</span>
      <span class="f24 gray" @click.stop="Cancel">取消</span>
    </div>
    <div class="num_box" @click.stop="Input">
      <span :class="{active:item!=''}" v-for="(item,index) in number_list" :key="index"></span>
      <input type="number" ref="number_input" v-focus v-model="number">
    </div>
    <a class="confirm" @click.stop="Confirm">确定</a>
  </div>
</div>
</template>
<script>
import { Toast } from "vant";
import { log } from 'util';
export default {
  name:"SafePassword",
  data(){
    return{
      number_list: ["", "", "", "", "", ""],
      number:'',
      timer:null
    }
  },
  methods:{
    Cancel(){
      this.$emit("cancel",false);
    },
    Confirm(){
      let val = this.number.toString();
      if(val.length == 6){
        this.$emit("confirm",this.number);
      }else{
        Toast({
          message:"请输入6位密码",
          duration:1500,
        })
      }
    },
    Input(){
      this.$refs.number_input.focus();
    },
  },
  watch:{
    number(newval,oldval){
      let val = newval.toString();
      if(val.length>=6){
        val = val.slice(0,6);
      }
      this.number = val;
      let arr = ['','','','','',''];
      for (var i = 0; i < this.number_list.length; i++) {
        arr[i] = val[i] || "";
      }
      this.number_list = arr;
      //6位数自动提交
      if (val.length >= 6) {
        this.timer = setTimeout(()=>{
          this.$emit("confirm",this.number);
        },200)
      }
    }
  },
  // 清除定时器
  beforeDestroy(){
    clearTimeout(this.timer);
    this.timer = null;
  },
  directives:{
    focus:{
      inserted(el,binding){
        el.focus();
      }
    }
  }
};
</script>

<style scoped lang="less">
.white{color:#fff}
.gray{color:#ccc}
.black{color:#333}
.wrap{width:100vw;height: 100vh;overflow: hidden;}
.safe_box{
  position: fixed;
  width:550px;
  border-radius: 16px;
  background-color: #14243B;
  top:50%;
  left: 50%;
  transform: translate(-50%,-50%) scale(.5);
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  box-sizing: border-box;
  padding: 32px;
  .safe_title{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 80px;
  }
  .num_box{
    height: 120px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    span{
      display: block;
      width:15%;
      height: 68px;
      border-radius: 8px;
      border:2px solid #354552;
      color:#fff;
      font-size: 32px;
      position: relative;
    }
    span.active:after{
      position: absolute;
      z-index: 10;
      content:"";
      display: block;
      border-radius: 50%;
      width:30%;
      height: 30%;
      top:50%;
      left:50%;
      transform: translate(-50%,-50%);
      background-color: #ddd;
    }
    input{
        position: absolute;
        opacity: 0;
        width:100%;
        height: 0;
        z-index:-100;
        line-height: 68px;
        left:0;
        top:50%;
        transform: translateY(-50%);
    }
  }
  a{
    display: block;
    width:100%;
    height: 68px;
    margin: 20px auto;
    background-color: #F1AD3E;
    border-radius: 30px;
    text-align: center;
    line-height: 68px;
  }
}
</style>